<template>
  <view class="home">
    <navBar :languageSwitch="languageSwitch" @submitLanguage="submitLanguage"></navBar>
    <div class="cart-1">
      <div class="cart-1-1">
        <div class="cart-1-1-2">{{handlingFee}}</div>
<!--        <a target="_blank" href="https://pancakeswap.finance/swap?utm_source=tokenpocket&inputCurrency=0x55d398326f99059fF775485246999027B3197955&outputCurrency=0xBCBe2fD778C000fe7A2162512DD956E8FBc8e5d4" class="cart-1-1-3">{{bingTrading}}</a>-->
      </div>
      <div class="cart-1-2">
        {{currentPrice}}
      </div>
      <div class="cart-1-3">
        <div class="cart-1-3-1">0.0183</div>
        <div class="cart-1-3-2">{{handlingFeeValue}}</div>
      </div>
    </div>

    <div class="cart-2-3">
      <div class="cart-2">
        <div class="cart-2-1">
          <div class="cart-2-1-1">From</div>
          <div class="cart-2-1-2">{{balance}}</div>
        </div>
        <div class="cart-2-2">
          <div class="cart-2-2-1">
            <img style="width: 50px" src="../../static/jiaoyi/shouye/1.png" alt="">
          </div>
          <div class="cart-2-2-2">
            <input style="height: 50px; line-height: 50px;width:80px;color: #2c405a"  focus :placeholder="placeholder" />
          </div>
        </div>
      </div>
      <img class="cart-4" src="../../static/jiaoyi/jiaoyi/4.png" alt="">
      <div class="cart-3">
        <div class="cart-3-1">TO</div>
        <div class="cart-3-2">
          <div class="cart-3-2-1">USDT</div>
          <div class="cart-3-2-1">0</div>
          <div class="cart-3-2-2">+</div>
          <div class="cart-3-2-1">CC</div>
          <div class="cart-3-2-1">0</div>
        </div>
      </div>
    </div>

    <div class="cart-5">
      {{exchange}}
    </div>

    <div class="cart-6">
      <span style="margin-left: 10px">0</span>
    </div>

    <div class="cart-7">
      <input style="height: 40px; line-height: 40px;margin-left: 10px"  focus :placeholder="placeholderUSDT" />
    </div>

    <div class="cart-5">{{addPool}}</div>
    <div style="height: 20px"></div>


  </view>
</template>

<script setup>
import navBar from '../../component/navBar.vue'
import {ref,reactive} from "vue";
import {onShow} from "@dcloudio/uni-app";

let languageSwitch = ref(true);

//文档
let handlingFee = ref('博餅3%手續費');
let bingTrading = ref('去博餅交易');
let currentPrice = ref('當前CC價格');
let handlingFeeValue = ref('5%手續費');
let balance = ref('余额');
let exchange = ref('交换');
let addPool = ref('加池');
let placeholder = ref('請輸入數量')
let placeholderUSDT = ref('請輸入USDT數量')

const submitLanguage = (row)=>{}

const handleBingTrading = ()=>{
  //外部链接跳转


}

onShow(()=>{
  getLanguages();
})

const getLanguages = ()=>{
  const lang = uni.getStorageSync('LANG_KEY')
  if(lang === '中文'){
    handlingFee.value='博餅3%手續費';
    bingTrading.value='去博餅交易';
    currentPrice.value='當前CC價格';
    handlingFeeValue.value='5%手續費';
    balance.value='余额';
    exchange.value='交换';
    addPool.value='加池';
    placeholder.value='請輸入數量'
    placeholderUSDT.value='請輸入USDT數量'
  }
  if(lang === 'Eng'){
    handlingFee.value='Bo Bing 3% handling fee';
    bingTrading.value='Go to Bo Bing';
    currentPrice.value='Current CC price';
    handlingFeeValue.value='5% handling fee';
    balance.value='balance';
    exchange.value='Exchange';
    addPool.value='Add Pool';
    placeholder.value='Please enter the quantity'
    placeholderUSDT.value='Please enter USDT the quantity'
  }
  if (lang === '日本語'){
    handlingFee.value='ボビング3%手数料';
    bingTrading.value='博餅取引に行く';
    currentPrice.value='現在のCC価格';
    handlingFeeValue.value='5%手数料';
    balance.value='残高';
    exchange.value='交換';
    addPool.value='プールに加える';
    placeholder.value='数量を入力してください'
    placeholderUSDT.value='USDT数量を入力してください'
  }
  if (lang === '한국어'){
    handlingFee.value='보빙 3% 수수료';
    bingTrading.value='가보빙';
    currentPrice.value='현재 CC 가격';
    handlingFeeValue.value='5% 수수료';
    balance.value='잔액';
    exchange.value='교환';
    addPool.value='풀에 추가';
    placeholder.value='수량을 입력하십시오'
    placeholderUSDT.value='USDT 수를 입력하십시오.'
  }
}
</script>

<style scoped>
.cart-3-2-1{
  width: 18%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}
.cart-3-2-2{
  width: 28%;
  text-align: center;
  font-size: 16px;
  font-weight: bolder;
}
.cart-3-2{
  margin-top: 30px;
  display: flex;
  justify-content: space-evenly;
}
.cart-3-1{
  font-size: 16px ;
  font-weight: bold;
  margin-left: 20px;
  margin-top: 30px;
}
.cart-1-3-1{
  font-size: 20px ;
  font-weight: bold;
  margin-left: 20px;
  color: #28529F;
}
.cart-1-3-2{
  font-size: 13px ;
  margin-left: 40px;
  margin-top:7px;
}
.cart-1-3{
  display: flex;
  margin-top: 10px;
}
.cart-1-2{
  font-size: 16px ;
  font-weight: bold;
  margin-left: 20px;
}
.cart-5{
  font-size: 16px;
  width: 90%;
  margin: 20px auto;
  background: #2A54A0;
  border-radius:10px;
  color: #FFFFFF;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border: 1px solid #EBEBEB;
}
.cart-6{
  font-size: 16px;
  width: 90%;
  margin: 20px auto;
  background: #FFFFFF;
  border-radius:10px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #EBEBEB;
}
.cart-7{
  font-size: 16px;
  width: 90%;
  margin: 20px auto;
  background: #FFFFFF;
  border-radius:10px;
  height: 40px;
  line-height: 40px;
  border: 1px solid #EBEBEB;
}
.home{
  background-color: #EBEBEB;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100%;
  min-height: 100vh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.cart-1{
  background: #FFFFFF;
  height: 200px;
  width: 90%;
  margin: 25px  auto;
  border-radius: 10px;
  border: 1px solid #EBEBEB;
}
.cart-2{
  background: #FFFFFF;
  height: 150px;
  width: 100%;
  border-radius: 10px 10px 0px 0px;
  margin-bottom: -19px;
  border: 1px solid #EBEBEB;
}
.cart-2-1{
  display: flex;
  justify-content: space-between;
  height:50px;
  line-height: 50px;
}
.cart-2-1-1{
  margin-left: 15px;
  font-weight: bold;
}
.cart-2-1-2{
  margin-right: 15px;
  color: rgb(72, 105, 171);
}

.cart-2-2{
  display: flex;
  justify-content: space-between;
  height:50px;
  line-height: 50px;
  margin-top: 10px;
}
.cart-2-2-1{
  margin-left: 15px;
  font-weight: bold;
}
.cart-2-2-2{
  margin-right: 15px;
  color: rgb(72, 105, 171);
}

.cart-2-3{
  width: 90%;
  margin: 0  auto;
}

.cart-3{
  margin-top: -19px;
  background: #FFFFFF;
  height: 150px;
  width: 100%;
  border-radius:0 0 10px 10px;
  border: 1px solid #EBEBEB;
  z-index: -1;
}
.cart-4{
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 30px;
  width: 30px;
}

.cart-1-1{
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  margin: 0 20px;
}
.cart-1-1-2{
  font-size: 14px;
}
.cart-1-1-3{
  background: #2A54A0;
  color: #FFFFFF;
  font-size: 16px;
  height: 40px;
  line-height: 40px;
  width: 120px;
  text-align: center;
  border-radius: 5px;
}
</style>